<template>
  <footer ref="fh">
    <ul>
      <li>
        <router-link exact active-class="active" to="/">
          <i class="iconfont icon-shouye"></i>
          <span>首页</span>
        </router-link>
        <!-- </li> -->
      </li>

      <li>
        <router-link exact active-class="active" to="/movie">
          <i class="iconfont icon-dianying"></i>
          <span>电影</span>
        </router-link>
      </li>
      <li>
        <router-link exact active-class="active" to="/center">
          <i class="iconfont icon-wode2"></i>
          <span>我的</span>
        </router-link>
      </li>
    </ul>
  </footer>
</template>
<script>
export default {
  data() {
    return {
      fH: 0,
    };
  },
  mounted() {
    // console.log('底部高度--->',this.$refs.fh.offsetHeight);
  },
};
</script>

<style lang="scss" scoped>
footer {
  width: 100%;
  height: 54px;
  background: #fff;
  //   line-height: 50px;
  position: fixed;
  left: 0;
  bottom: 0;
  // border-top: 2px solid #ccc;

  z-index: 99;
  ul {
    box-shadow: 0 0 5px rgb(192, 192, 192);
    height: 54px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #7e7e7e;
        // transition: all 0.6s ease-in;
        // transform: scale(.9); 
        i {
          font-size: 26px;
        }
        span {
          margin-top: 3px;
          font-size: 14px;
        }
        .icon-jia {
          display: inline-block;
          font-size: 30px;
          margin-bottom: 10px;
        }
        &:hover {
          //   针对a标签移动端高亮
          -webkit-tap-highlight-color: rgb(255, 255, 255);
        }
      }
      .active {
        color: #f03d37;
        // transform: scale(1); 
        animation: movies 0.6s;
      }
    }
  }
}
@keyframes movies {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>